<template>
  <div>
    App
    <h1>模板语法</h1>
    {{ msg }}
    <h1>计数器 - 事件</h1>
    <button v-on:click=" count += 1">{{count}}</button>
    <h1>列表渲染</h1>
    <ul>
      <li v-for="(item, index) of list" v-bind:key="index">
        {{ item }}
      </li>
    </ul>
    <ul>
      <li v-for="(item, index) of arr" v-bind:key="index">
        {{ item.brand }}
        <ol>
          <li v-for="(itm, idx) of item.data" v-bind:key="idx">
            {{ itm }}
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () { // 当前组件的状态
    return { // 设置了一个变量msg，值为hello everybody
      msg: 'hello everybody',
      count: 0,
      list: ['aaa', 'bbb', 'ccc'],
      arr: [
        {
          brand: '宝马',
          data: ['X5', 'X6']
        },
        {
          brand: '奥迪',
          data: ['Q7', 'A6']
        }
      ]
    }
  }
}
</script>

<style>
</style>
